import React, { Component, useMemo } from "react";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import Taro from "@tarojs/taro";

import styles from "./index.module.scss";
import MiniHeader from "@/components/UI/MiniHeader";
import imgs from "./imgs/_img";
const evaluationList = [
  {
    img: imgs["xingqu"],
    text: "SDS兴趣倾向测评",
  },
  {
    img: imgs["nengli"],
    text: "MIDAS能力倾向测评",
  },
  {
    img: imgs["xingge"],
    text: "MBTI性格倾向测评",
  },

  {
    img: imgs.jiazhi,
    text: "SDS兴趣倾向测评",
  },

  {
    img: imgs.xueke,
    text: "SDS兴趣倾向测评",
  },
];
const funcs = [
  {
    img: imgs.xuexiao,
    text: "查学校",
  },
  {
    img: imgs.zhuanye,
    text: "查专业",
  },
  {
    img: imgs.yuanxiaopaihang,
    text: "院校排行",
  },
  {
    img: imgs.zhuanyepaihang,
    text: "专业排行",
  },
  {
    img: imgs.yuanxiaoduibi,
    text: "院校对比",
  },
  {
    img: imgs.zhuanyeduibi,
    text: "专业对比",
  },
  {
    img: imgs.picixian,
    text: "批次线",
  },
  {
    img: imgs.zhaoshengjianzhang,
    text: "招生简章",
  },
  {
    img: imgs.mingdan,
    text: "常用名单",
  },
  {
    img: imgs.tongfen,
    text: "同分去向",
  },
];

export default function() {
  let [func1, func2] = useMemo(() => {
    let f2 = [...funcs];
    let f1 = f2.splice(0, 5);
    return [f1, f2];
  }, []);
  return (
    <View className={styles.page}>
      <MiniHeader title="教育" transparent hideHome></MiniHeader>
      <View className={styles.header}>
        <View className={styles.text1}>以大数据信息平台为基础</View>
        <View className={styles.text2}>采用人工智能算法，为学生定制个性化高考报考方案</View>
        <Image className={styles.btn} src={imgs.bianzu} mode="widthFix"></Image>
      </View>
      <View className={styles.content}>
        <View className={styles.iconWrap}>
          <View className={styles.icons}>
            {func1.map(item => (
              <View className={styles.icon} key={item.text}>
                <Image src={item.img}></Image>
                <Text>{item.text}</Text>
              </View>
            ))}
          </View>
          <View className={styles.icons}>
            {func2.map(item => (
              <View className={styles.icon} key={item.text}>
                <Image src={item.img}></Image>
                <Text>{item.text}</Text>
              </View>
            ))}
          </View>
        </View>
        <View className={styles.evaluation}>
          <View className={styles.title}>测评系统</View>
          <ScrollView scrollX>
            <View className={styles.evaluationBody}>
              {evaluationList.map(item => (
                <View className={styles.evaluationItem} key={item.text}>
                  <Image src={item.img}></Image>
                  <Text>{item.text}</Text>
                </View>
              ))}
            </View>
          </ScrollView>
        </View>
        <View className={styles.dataWrap}>
          <View className={styles.title}>数据系统</View>
          <View className={styles.dataContent}>
            <View className={styles.leftWrap}>
              <View className={styles.contentBox}>
                <Image src={imgs.data1}></Image>
                <View className={styles.textWrap}>
                  <View className={styles.text1}>分数检索</View>
                  <View className={styles.text2}>查询招生录取数据</View>
                </View>
              </View>
              <View className={styles.contentBox}>
                <Image src={imgs.data3}></Image>
                <View className={styles.textWrap}>
                  <View className={styles.text1}>高校检索</View>
                  <View className={styles.text2}>查询招生录取数据</View>
                </View>
              </View>
            </View>
            <View className={styles.rightWrap}>
              <View className={styles.contentBox}>
                <Image src={imgs.data2}></Image>
                <View className={styles.textWrap}>
                  <View className={styles.text1}>分数检索</View>
                  <View className={styles.text2}>查询招生录取数据</View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
